<template>
  <page-model
  :breadHeard=breadHeard
  @backLast="backLast"
  >
  <desc-title
  class="mt-20"
  :descTitle=descTitle
  >
  </desc-title>
  <div class="content">
    <el-form :model="requestVO " :rules="rules" ref="requestVO" label-width="100px">
        <el-form-item label="摄像机编号：" prop="cameraId">
          <el-input type="text" placeholder="请输入摄像机编号"  v-model="requestVO .cameraId" disabled></el-input>
        </el-form-item>
        <el-form-item label="内网 IP地址：" prop="cameraInnerIp">
          <el-input type="text" placeholder="请输入内网 IP地址"  v-model="requestVO .cameraInnerIp" ></el-input>
        </el-form-item>
        <el-form-item label="端口：" prop="port">
          <el-input type="text" placeholder="请输入端口号"  v-model="requestVO .port" ></el-input>
        </el-form-item>
        <el-form-item label="WEB IP地址：" prop="cameraWebIp">
          <el-input type="text" placeholder="请输入WEB IP地址"  v-model="requestVO .cameraWebIp" ></el-input>
        </el-form-item>
        <el-form-item label="用户名:" prop="cameraUsername">
          <el-input type="text" placeholder="请输入用户名"  v-model="requestVO .cameraUsername" ></el-input>
        </el-form-item>
        <el-form-item label="密码：:" prop="cameraPassword">
          <el-input type="password" placeholder="请输入密码"  v-model="requestVO .cameraPassword" ></el-input>
        </el-form-item>
    </el-form>
    <div class="addBtn">
      <span class="confirm flex-center" @click="confirmAdd">确定</span>
    </div>
  </div>
</page-model>
</template>

<script>
export default {
  data () {
    return {
      breadHeard: {
        title: '添加摄像机',
        firstBread: '疫情防控 ',
        secondBread: '添加'
      },
      descTitle: '摄像头信息',
      requestVO: {
        cameraInnerIp: '',
        port: '',
        cameraId: '',
        cameraPassword: '',
        cameraUsername: '',
        cameraWebIp: ''
      },
      rules: {
        cameraId: [
          { required: true, message: '请输入摄像机编号', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '请输入端口号', trigger: 'blur' }
        ],
        cameraPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        cameraUsername: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        cameraWebIp: [
          { required: true, message: '请输入WEB IP地址', trigger: 'blur' }
        ],
        cameraInnerIp: [
          { required: true, message: '请输入内网 IP地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isEdit () {
      return false
    },
    cameraId () {
      return sessionStorage.getItem('cameraId')
    }
  },
  methods: {
    backLast () {
      this.$router.push('/epControlMain')
    },
    async createDeviceNum () {
      const numData = await this.$store.dispatch('actionRecognition/createDeviceNum')

      this.requestVO = {
        cameraInnerIp: '',
        port: '',
        cameraId: numData.message,
        cameraPassword: '',
        cameraUsername: '',
        cameraWebIp: ''
      }
    },
    async judgePageType () {
      if (this.cameraId) {
        this.breadHeard = {
          title: '编辑摄像机',
          firstBread: '疫情防控 ',
          secondBread: '编辑'
        }
        this.$store.dispatch('epidmicControl/getItemInfo', { id: this.cameraId }).then(res => {
          // console.log(res)
          if (res.code === 200) {
            const data = res.data
            this.requestVO = {
              cameraInnerIp: data.cameraInnerIp,
              port: data.port,
              cameraId: data.cameraId,
              cameraPassword: data.cameraPassword,
              cameraUsername: data.cameraUsername,
              cameraWebIp: data.cameraWebIp
            }
          }
        })
        return
      }
      this.createDeviceNum()
    },
    confirmAdd () {
      // console.log(this.requestVO)
      const params = { ...this.requestVO }
      // console.log(this.$refs)
      this.$refs.requestVO.validate((valid) => {
        if (valid) {
          this.cameraId && this.$store.dispatch('epidmicControl/updateCamera', { ...params, id: this.cameraId }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '编辑成功',
                duration: 500
              })
              this.$router.push('/epControlMain')
            } else {
              this.$message({
                type: 'error',
                message: res.data.message,
                duration: 1000
              })
            }
          })
          !this.cameraId && this.$store.dispatch('epidmicControl/addCamera', params).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '添加成功',
                duration: 500
              })
              this.$router.push('/epControlMain')
            } else {
              this.$message({
                type: 'error',
                message: res.data.message,
                duration: 1000
              })
            }
          })
        }
      })
    }
  },
  mounted () {
    this.judgePageType()
  }
}
</script>

<style lang="scss" scoped>
.content{
  position: relative;
  background-color: #fff;
  height: calc(100% - 201px);
  ::v-deep .el-form{
    width: 800px;
    .el-input{
      width: 400px;
      .el-input__inner{
        height: 48px;
        line-height: 48px;
      }
    }
  .el-input.is-disabled .el-input__inner{
    background:rgba(248,248,248,1);
    border-radius:6px;
    border:1px solid rgba(220,220,220,1);
    color: #333333;
  }
  .el-form-item{
    margin-bottom: 32px;
  }
  .el-form-item__label{
    width: 300px !important;
    text-align: right;
    }
  .el-form-item__error{
    line-height: 24px;
    padding-left: 300px;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
          content: '*';
          color: #4868FF;
          margin-right: 4px;
    }
  }
 ::v-deep .el-upload--picture-card{
    width:390px;
    height:220px;
    background-color: #fff;
    .nopic{
      height: 100%;
      align-items: center;
      justify-content: center;
      position: relative;
      .addpics{
        line-height: 20px;
        height:20px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(200,200,200,1);
      }
    }
      .pictips{
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 586px;
        height:20px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,180,21,1);
        cursor:default
      }
      .el-progress-circle{
        width:40px !important;
        height:40px !important;
      }
  }
}
.addBtn{
    position: absolute;
    bottom: 30px;
    padding-left: 300px;
  .confirm{
    width:172px;
    height:48px;
    background:rgba(72,104,255,1);
    border-radius:24px;
    font-size:18px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    cursor: pointer;
  }
}
</style>
